<template>
  <ul class="h-pager" @click="onPagerClick" @keyup.enter="onEnter">
    <li
      v-if="pageCount! > 0"
      :class="{ 'is-active': currentPage === 1, 'is-disaled': disabled }"
      class="number"
      :tabindex="tabindex"
    >
      1
    </li>
    <li
      v-if="showPrevMore"
      :class="prevMoreKls"
      :tabindex="tabindex"
      @mouseenter="onMouseEnter(true)"
      @mouseleave="quickPrevHover = false"
      @focus="onFocus(true)"
      @blur="quickPrevFocus = false"
    >
      <h-icon
        v-if="(quickPrevHover || quickPrevFocus) && !disabled"
        :icon="['fas', 'angles-left']"
      />
      <svg
        v-else
        t="1738945638732"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4213"
        width="200"
        height="200"
      >
        <path
          d="M227.14123 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C321.728492 456.087573 279.288914 413.647995 227.14123 413.647995z"
          fill="#272636"
          p-id="4214"
        ></path>
        <path
          d="M510.903016 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C605.490278 456.087573 563.051723 413.647995 510.903016 413.647995z"
          fill="#272636"
          p-id="4215"
        ></path>
        <path
          d="M794.665825 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C889.253086 456.087573 846.813508 413.647995 794.665825 413.647995z"
          fill="#272636"
          p-id="4216"
        ></path>
      </svg>
    </li>
    <li
      v-for="pager in pagers"
      :key="pager"
      :class="{ 'is-active': currentPage === pager, 'is-disaled': disabled }"
      class="number"
      :tabindex="tabindex"
    >
      {{ pager }}
    </li>
    <li
      v-if="showNextMore"
      :class="nextMoreKls"
      :tabindex="tabindex"
      @mouseenter="onMouseEnter()"
      @mouseleave="quickNextHover = false"
      @focus="onFocus()"
      @blur="quickNextFocus = false"
    >
      <h-icon
        v-if="(quickNextHover || quickNextFocus) && !disabled"
        :icon="['fas', 'angles-right']"
      />
      <svg
        v-else
        t="1738945638732"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4213"
        width="200"
        height="200"
      >
        <path
          d="M227.14123 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C321.728492 456.087573 279.288914 413.647995 227.14123 413.647995z"
          fill="#272636"
          p-id="4214"
        ></path>
        <path
          d="M510.903016 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C605.490278 456.087573 563.051723 413.647995 510.903016 413.647995z"
          fill="#272636"
          p-id="4215"
        ></path>
        <path
          d="M794.665825 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C889.253086 456.087573 846.813508 413.647995 794.665825 413.647995z"
          fill="#272636"
          p-id="4216"
        ></path>
      </svg>
    </li>
    <li
      v-if="pageCount! > 1"
      :class="{
        'is-active': currentPage === pageCount,
        'is-disaled': disabled,
      }"
      class="number"
      :tabindex="tabindex"
    >
      {{ pageCount }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from "vue";
import type { PagerProps } from "./type.ts";
import HIcon from "@/components/Icon/HIcon.vue";

const {
  disabled,
  currentPage,
  pageCount,
  pagerCount = 7,
} = defineProps<PagerProps>();
const emit = defineEmits(["change"]);

const showPrevMore = ref(false);
const showNextMore = ref(false);
const quickPrevHover = ref(false);
const quickNextHover = ref(false);
const quickPrevFocus = ref(false);
const quickNextFocus = ref(false);

const pagers = computed(() => {
  const pagerCount1 = pagerCount;
  const halfPagerCount = (pagerCount - 1) / 2;
  const currentPage1 = Number(currentPage);
  const pageCount1 = Number(pageCount);
  let showPrevMore = false;
  let showNextMore = false;
  // 判断省略号显示
  if (pageCount1 > pagerCount1) {
    if (currentPage1 > pagerCount1 - halfPagerCount) {
      showPrevMore = true;
    }
    if (currentPage1 < pageCount1 - halfPagerCount) {
      showNextMore = true;
    }
  }
  const array: number[] = [];
  if (showPrevMore && !showNextMore) {
    const startPage = pageCount1 - (pagerCount1 - 2);
    for (let i = startPage; i < pageCount1; i++) {
      array.push(i);
    }
  } else if (!showPrevMore && showNextMore) {
    for (let i = 2; i < pagerCount1; i++) {
      array.push(i);
    }
  } else if (showPrevMore && showNextMore) {
    const offset = Math.floor(pagerCount1 / 2) - 1;
    for (let i = currentPage1 - offset; i <= currentPage1 + offset; i++) {
      array.push(i);
    }
  } else {
    for (let i = 2; i < pageCount1; i++) {
      array.push(i);
    }
  }
  return array;
});

const prevMoreKls = computed(() => [
  "more",
  "btn-quickprev",
  { "is-disabled": disabled },
]);

const nextMoreKls = computed(() => [
  "more",
  "btn-quicknext",
  { "is-disabled": disabled },
]);

// 元素是否可以聚焦
const tabindex = computed(() => (disabled ? -1 : 0));

watchEffect(() => {
  const halfPagerCount = (pagerCount - 1) / 2;
  showPrevMore.value = false;
  showNextMore.value = false;
  if (pageCount! > pagerCount) {
    if (currentPage! > pagerCount - halfPagerCount) {
      showPrevMore.value = true;
    }
    if (currentPage! < pageCount! - halfPagerCount) {
      showNextMore.value = true;
    }
  }
});

function onMouseEnter(forward = false) {
  if (disabled) return;
  if (forward) {
    quickPrevHover.value = true;
  } else {
    quickNextHover.value = true;
  }
}

function onFocus(forward = false) {
  if (forward) {
    quickPrevFocus.value = true;
  } else {
    quickNextFocus.value = true;
  }
}

function onEnter(e: UIEvent) {
  const target = e.target as HTMLElement;
  if (
    target.tagName.toLowerCase() === "li" &&
    Array.from(target.classList).includes("number")
  ) {
    const newPage = Number(target.textContent);
    if (newPage !== currentPage) {
      emit("change", newPage);
    }
  } else if (
    target.tagName.toLowerCase() === "li" &&
    Array.from(target.classList).includes("more")
  ) {
    onPagerClick(e);
  }
}

function onPagerClick(event: UIEvent) {
  console.log(event.target);

  const target = event.target as HTMLElement;
  if (target.tagName.toLowerCase() === "ul" || disabled) {
    return;
  }
  let newPage = Number(target.textContent);
  const pageCount1 = pageCount!;
  const currentPage1 = currentPage;
  const pagerCountOffset = pagerCount - 2;
  if (target.className.includes("more")) {
    if (target.className.includes("quickprev")) {
      newPage = currentPage1! - pagerCountOffset;
    } else if (target.className.includes("quicknext")) {
      newPage = currentPage1! + pagerCountOffset;
    }
  }
  if (!Number.isNaN(+newPage)) {
    if (newPage < 1) {
      newPage = 1;
    }
    if (newPage > pageCount1) {
      newPage = pageCount1;
    }
  }
  if (newPage !== currentPage) {
    emit("change", newPage);
  }
}
</script>

<style scoped>
@import url(./style.css);
</style>
